<template>
	<view class="app">
			<jnavbar :title="'分销条件'"></jnavbar>
		<view class="page_container">
			<view class="level_name"><text>当前等级:{{agentdetail.grade?agentdetail.grade.name:'默认等级'}}</text></view>
			<view class="list">
				<view class="item" v-for="(item, i) in list" :key="i">
					<text class="title">{{ item.name }}</text>
					<view class="conditionslist">
						<text class="c_title">升级条件:</text>
						<view class="content">
							<block v-for="(data, i) in conditionslist">
								<view v-if="item[data.key] > 0" class="" :key="i" class="u-flex u-row-between">
									<text>{{ data.name }}</text>
									<text>{{ item[data.key1] }}/{{ item[data.key] }}{{ data.unit }}</text>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			list: [],
			agent_level:"",
			agentdetail:{
				
			},
			conditionslist: [
				{
					id: 1,
					name: '下级用户人数',
					key: 'users',
					key1: 'current_users',
					unit: '人'
				},
				{
					id: 2,
					name: '佣金总额',
					key: 'commission',
					key1: 'current_commission',
					unit: '元'
				},
				{
					id: 3,
					name: '已提现佣金总额',
					key: 'draw',
					key1: 'current_draw',
					unit: '元'
				},
				{
					id: 4,
					name: '下级用户消费金额',
					key: 'payment',
					key1: 'current_payment',
					unit: '元'
				},
				{
					id: 5,
					name: '下级分销商人数',
					key: 'agents',
					key1: 'current_agents',
					unit: '人'
				}
			]
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo
		})
	},
	async onLoad(e) {
		await this.$getWx;
		this.getlist();
		this.getagentdetail()
	},
	methods: {
		logincallback() {
			this.getlist();
			this.getagentdetail()
		},
		getagentdetail() {
			this.$http('/agent', {}, 'GET').then(res => {
				uni.stopPullDownRefresh();
				if (!res.data.msg) {
					
				} else {
					
					if (res.data.msg.is_agent == 0) {
						
					} else {
						
						if (res.data.msg.type == 1) {
						
						} else if (res.data.msg.type == 2) {
						
						} else {
						
							this.agentdetail = res.data.msg;
							
						}
					}
				}
			});
		},
		getlist() {
			this.$http('/agent/agentGrade', {}, 'get').then(res => {
				this.list = res.data.msg;
				let level=this.userInfo.level
			let b=	this.list.filter(a=>{
					return a.id==level
				})
				if(b.length>0){
					this.agent_level=b[0].name
				}else{
					this.agent_level='默认等级'
				}
			});
		}
	}
};
</script>

<style lang="scss">
.item {
	width: 690rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	padding: 20rpx;
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	.conditionslist {
		margin-top: 20rpx;
		.c_title {
			font-size: 30rpx;
		}
		.content {
			margin-top: 20rpx;
			view {
				padding: 10rpx 0;
				font-size:26rpx;
			}
		}
	}
}
.level_name{
	padding:30rpx 0 10rpx 0;
	text-align: center;
	// text-align: center;
	// margin: 0 auto;
}
</style>
